<template>
  <div class="dailyReport-container">
    <div class="dailyReport-search">
      <span class="page-title">日输送报表</span>
      <el-date-picker v-model="workBeginTime" type="daterange" range-separator="至" start-placeholder="选择入职时间"
                      end-placeholder="选择入职时间" class="withdraw-time" value-format="yyyy-MM-dd"></el-date-picker>

      <el-input placeholder="请输入搜索内容" v-model="keyWords" class="input-with-select search-keyword">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="企业名称" value="1"></el-option>
          <el-option label="民族" value="2"></el-option>
        </el-select>
      </el-input>
      <el-button type="primary" size="small" icon="el-icon-search" @click="searchDailyReport">搜索</el-button>
      <el-button type="info" size="small" class="search-keyword-reset" plain @click="resetSearch">重置</el-button>
      <div class="excel-inout-box">
        <el-button size="mini" :loading="downloadLoading" type="info" plain icon="el-icon-document"
                   @click="handleExportExcel"
                   v-if="checkPermissionPoints(6) == 1">导出
        </el-button>
      </div>
    </div>

    <div class="dailyReport-table">
      <el-table ref="multipleTable" :data="dailyReportData" border stripe fit v-loading="listLoading"
                :row-style="{height:'50px'}" :header-row-style="{height:'40px'}">
        <el-table-column label="id" width="80">
          <template slot-scope="scope">
            {{scope.row.id}}
          </template>
        </el-table-column>
        <el-table-column label="员工姓名" width="100">
          <template slot-scope="scope">
            {{scope.row.userName}}
          </template>
        </el-table-column>
        <el-table-column label="员工身份证" width="170">
          <template slot-scope="scope">
            {{scope.row.userCardNumber}}
          </template>
        </el-table-column>
        <el-table-column label="民族" width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.nation}}
          </template>
        </el-table-column>
        <el-table-column label="企业名称" width="190" show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.mechanismName}}
          </template>
        </el-table-column>
        <el-table-column label="入职时间" width="100">
          <template slot-scope="scope">
            {{scope.row.workBeginTime}}
          </template>
        </el-table-column>
        <el-table-column label="驻厂姓名" width="80">
          <template slot-scope="scope">
            {{scope.row.teacherName}}
          </template>
        </el-table-column>
        <el-table-column label="输送来源" width="80">
          <template slot-scope="scope">
            {{scope.row.source | changeEmpOrigin}}
          </template>
        </el-table-column>
        <el-table-column label="代理" width="80">
          <template slot-scope="scope">
            {{scope.row.agentName}}
          </template>
        </el-table-column>
        <el-table-column label="员工电话" width="110">
          <template slot-scope="scope">
            {{scope.row.userTel}}
          </template>
        </el-table-column>
        <el-table-column label="工价" width="80">
          <template slot-scope="scope">
            {{scope.row.workMoney}}
          </template>
        </el-table-column>

        <el-table-column label="生成时间" width="160">
          <template slot-scope="scope">
            <span v-if="scope.row.time">{{scope.row.time | formatTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否隐藏" width="80">
          <template slot-scope="scope">
            {{scope.row.delStatus | changeDelStatus}}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="200" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" style="width: 96px" @click="handleLook(scope.row)"
                       v-if="checkPermissionPoints(3) == 1">查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :type="1" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                  @pagination="getDailyReportList"/>
    </div>

    <!--查看-->
    <el-dialog title="详细信息" :visible.sync="dialogLookVisible" width="960px" class="dailyReport-dialog look-dialog">
      <el-form label-width="140px" size="mini">
        <el-form-item label="员工姓名：">
          <span>{{dailyReport.userName}}</span>
        </el-form-item>
        <el-form-item label="员工身份证：">
          <span>{{dailyReport.userCardNumber}}</span>
        </el-form-item>
        <el-form-item label="民族：">
          <span>{{dailyReport.nation}}</span>
        </el-form-item>
        <el-form-item label="企业名称：">
          <span>{{dailyReport.mechanismName}}</span>
        </el-form-item>
        <el-form-item label="入职时间：">
          <span>{{dailyReport.workBeginTime}}</span>
        </el-form-item>
        <el-form-item label="输送来源：">
          <span>{{dailyReport.source | changeEmpOrigin}}</span>
        </el-form-item>
        <el-form-item label="代理：">
          <span>{{dailyReport.agentName}}</span>
        </el-form-item>
        <el-form-item label="员工电话：">
          <span>{{dailyReport.userTel}}</span>
        </el-form-item>
        <el-form-item label="工价(元/时)：">
          <span>{{dailyReport.workMoney}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" style="width: 96px" @click="dialogLookVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import Pagination from '@/components/Pagination';
  import {mapGetters} from 'vuex';
  import {permissionPoints} from '@/utils/permission';
  import {baseUrl} from "@/api/constant";
  import {formatDate} from "@/utils/index";
  import {getDailyReportDetail, getInitDailyReportList} from "../../../api/shop/shop";
  import {getToken} from "../../../utils/auth";

  export default {
    name: "dailyReport",
    computed: {
      ...mapGetters([
        'points'
      ])
    },
    components: {
      Pagination
    },
    data() {
      return {
        total: 0,
        listQuery: {
          page: 1,
          limit: 20,
          mechanismName: '',
          nation: '',
          beginTime: '',
          endTime: '',
        },
        workBeginTime: [],
        keyWords: '',
        select: '1',
        listLoading: false,
        dialogLookVisible: false,
        dailyReportData: [],
        dailyReport: {},
        downloadLoading: false
      }
    },
    created() {
      this.getDailyReportList();
    },
    methods: {
      searchDailyReport() {//搜索
        this.listQuery.mechanismName = '';
        this.listQuery.nation = '';

        if (this.workBeginTime && this.workBeginTime.length > 0) {
          this.listQuery.beginTime = this.workBeginTime[0];
          this.listQuery.endTime = this.workBeginTime[1];
        } else {
          if (this.keyWords == '' || this.keyWords == undefined) {
            return this.$message.info({message: '请输入搜索内容', duration: 1000});
          }
        }

        if (this.select == 1) {
          this.listQuery.mechanismName = this.keyWords;
        } else if (this.select == 2) {
          this.listQuery.nation = this.keyWords;
        }

        this.listQuery.page = 1;
        this.getDailyReportList();
      },
      resetSearch() {
        this.select = '1';
        this.keyWords = '';
        this.listQuery.mechanismName = '';
        this.listQuery.nation = '';
        this.listQuery.beginTime = '';
        this.listQuery.endTime = '';
        this.workBeginTime = [];
        this.listQuery.page = 1;
        this.getDailyReportList();
      },
      getDailyReportList() {
        this.listLoading = true;
        getInitDailyReportList(this.listQuery).then((res) => {
          this.listLoading = false;
          let retObj = res;
          if (retObj.code == 0 && retObj.data != null) {
            const {items, totalRecord} = retObj.data;
            this.total = totalRecord;
            this.dailyReportData = items;
          }
        }).catch(() => {
          this.listLoading = false;
        })
      },
      checkPermissionPoints(type) {
        let pointObj = this.points.dailyReport;
        return permissionPoints(type, pointObj);
      },
      handleLook(row) {
        this.dialogLookVisible = true;
        getDailyReportDetail(row.id).then((res) => {
          let retObj = res;
          if (retObj.code == 0 && retObj.data != null) {
            this.dailyReport = retObj.data;
          }
        })
      },
      commonSelection() {
        let row = {};
        let value = this.multipleSelection;
        if (value && value.length > 0) {
          let arr = [];
          value.forEach((item) => {
            arr.push(item.id);
          });
          row.id = arr.join(",");
        }
        return row;
      },
      handleExportExcel() {
        let ids = '';
        let row = this.commonSelection();
        if (row && Object.keys(row).length != 0) {
          ids = row.id;
        }
        this.downloadLoading = true;
        this.axios.defaults.headers.common["tk"] = getToken();
        this.axios(
          {
            method: 'POST',
            url: baseUrl + '/dailyReport/export_daily_report',
            data: {
              'ids': ids,
              'mechanismName': this.listQuery.mechanismName,
              'nation': this.listQuery.nation,
              'beginTime': this.listQuery.beginTime,
              'endTime': this.listQuery.endTime
            },
            responseType: 'blob' //设置响应的数据类型为一个包含二进制数据的 Blob 对象，必须设置
          }
        ).then(response => {
          if (response.status == 200) {
            const time = formatDate((new Date()), 'yyyy-MM-dd hhmmss');
            const blob = new Blob([response.data], {type: 'application/vnd.ms-excel'});
            const fileName = `日输送报表${time}.xls`;

            if (window.navigator && window.navigator.msSaveOrOpenBlob) {//兼容ie
              window.navigator.msSaveBlob(blob, fileName)
            } else {
              const linkNode = document.createElement('a');

              linkNode.download = fileName; //a标签的download属性规定下载文件的名称
              linkNode.style.display = 'none';
              linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
              document.body.appendChild(linkNode);
              linkNode.click();  //模拟在按钮上的一次鼠标单击

              URL.revokeObjectURL(linkNode.href); // 释放URL 对象
              document.body.removeChild(linkNode);
            }
          } else {
            this.$message.error({message: `导出失败，请重试【${response.status}】`, duration: 2000});
          }
          this.downloadLoading = false;
        });
      }
    },
    filters: {
      formatTime(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
      },
      changeDelStatus(type) {
        if (type == 0) {
          return '显示';
        } else if (type == 1) {
          return '隐藏';
        }
      },
      changeEmpOrigin(value) {
        if ("DH" == value) {
          return '大和';
        } else if ("LP" == value) {
          return '蓝聘';
        } else if ("SS" == value) {
          return '上势';
        } else if ("DYH" == value) {
          return '大赢和';
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dailyReport-container {
    .dailyReport-search {
      display: flex;
      align-items: center;
      width: 100%;
      height: 80px;
      .page-title {
        padding-left: 18px;
        min-width: 140px;
        text-align: left;
        font-size: 18px;
        font-weight: bold;
        color: rgba(61, 68, 77, 1);
      }
      .search-keyword {
        margin-right: 24px;
        width: 470px;
        > > > .el-select .el-input {
          width: 110px;
        }
        > > > .el-input-group__prepend {
          background-color: #fff;
        }
      }
      .withdraw-time {
        margin-right: 8px;
        width: 276px;
      }
      .search-keyword-reset {
        margin-right: 36px;
      }
      .excel-inout-box {
        margin-left: auto;
        margin-right: 18px;
      }
    }

    .dailyReport-table {
      width: 98%;
      margin-left: 18px;
      > > > .el-table td, .el-table th {
        padding: 6px 0px;
      }
      > > > .el-table__header th {
        padding: 0;
        height: 30px;
        line-height: 30px;
      }
      > > > .el-table__fixed-right {
        height: 100% !important;
      }
      > > > .el-table__column-filter-trigger {
        line-height: 28px;
        i {
          font-size: 18px;
        }
      }
      > > > .el-table__row .cell {
        display: flex;
        align-items: center;
      }
      > > > .el-table__header .has-gutter .cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .dailyReport-dialog > > > .el-dialog .el-dialog__header {
      display: flex;
      align-items: center;
      height: 48px;
      background: #F7F8FA;
      padding: 0px 0px 0px 12px;
      .el-dialog__headerbtn {
        top: 15px;
      }
    }
    .look-dialog > > > .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
      margin-bottom: 0px;
    }
    .dailyReport-dialog {
      font-size: 14px;
      color: #606266;
    }
  }
</style>
